<template>
  <div class="my-gpt">
    <div
      class="my-gpt-content"
      ref="content"
    >
      <div class="list">
        <div
          class="item"
          :class="{ 'my-info': item.type === 2}"
          v-for="item in list"
          :key="item.id"
        >
          <div class="item-face"></div>
          <div class="item-content">
            <div class="item-content-txt">
              <!-- 如果是type=1并且loading=true，则显示加载中 -->
              <span
                class="ellipsis"
                v-if="item.type === 1 && item.loading"
              ></span>
              <!-- 否则显示正常的message -->
              <span v-else>{{ item.message }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="my-input-container">
      <textarea
        class="my-input"
        placeholder="请输入内容"
        rows="1"
        maxlength="10000"
        @keydown.enter.prevent="submitMessage"
      ></textarea>
      <div
        class="input-btn"
        @click="submitMessage"
        :class="{ 'disabled': isSubmitting }"
      ><i data-feather="send"></i></div>
    </div>
  </div>
</template>

<script>
import feather from "feather-icons";
export default {
  data() {
    return {
      message: "",
      list: [
        {
          id: 1,
          type: 1,
          message: "请输入问题。",
          loading: false,
        },
        {
          id: 2,
          type: 2,
          message: "Hello, world!",
          loading: false,
        },
      ],
      isSubmitting: false, // 添加锁定状态
    };
  },
  mounted() {
    this.scrollToBottom();
    window.addEventListener("resize", this.scrollToBottom.bind(this));
    const textarea = this.$el.querySelector("textarea");
    textarea.addEventListener("input", this.autoGrow);
    feather.replace();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.scrollToBottom.bind(this));
    const textarea = this.$el.querySelector("textarea");
    textarea.removeEventListener("input", this.autoGrow);
  },
  methods: {
    autoGrow(event) {
      const textarea = event.target;
      textarea.style.height = "auto";
      textarea.style.height = `${Math.min(textarea.scrollHeight, 4 * 22)}px`; // 假设每行高度为22px

      if (textarea.scrollHeight > 4 * 22) {
        textarea.style.overflowY = "scroll";
      } else {
        textarea.style.overflowY = "hidden";
      }
    },
    submitMessage() {
      if (this.isSubmitting) {
        return; // 如果正在提交，则直接返回，不做任何处理
      }

      const textarea = this.$el.querySelector("textarea");
      const message = textarea.value.trim();

      if (message) {
        console.log("Message submitted:", message);
        textarea.value = "";
        this.autoGrow({ target: textarea });

        this.list.push({
          id: new Date().getTime(),
          type: 2,
          message,
          loading: false,
        });
        this.isSubmitting = true;

        // 确保在下一次DOM更新后执行滚动操作
        this.$nextTick(() => {
          this.scrollToBottom();
        });

        this.getMessage();
      }
    },
    scrollToBottom() {
      const contentEl = this.$refs.content;
      if (contentEl) {
        contentEl.scrollTop = contentEl.scrollHeight;
      }
    },
    getMessage() {
      // 模拟请求加载状态
      this.list.push({
        id: new Date().getTime(),
        type: 1,
        message: "我也不知",
        loading: true,
      });

      // 确保在下一次DOM更新后执行滚动操作
      this.$nextTick(() => {
        this.scrollToBottom();
      });

      // 模拟网络请求延迟，2秒后将loading设为false
      setTimeout(() => {
        this.list = this.list.map((item) => {
          if (item.id === this.list[this.list.length - 1].id) {
            item.loading = false;
          }
          return item;
        });

        this.isSubmitting = false;

        // 确保在下一次DOM更新后执行滚动操作
        this.$nextTick(() => {
          this.scrollToBottom();
        });
      }, 4000); // 2秒延迟
    },
  },
};
</script>

<style lang="less" scoped>
.my-gpt {
  width: 1200px;
  height: calc(100vh - 50px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}

.my-gpt-content {
  height: 100%;
  overflow-y: overlay;
  color: #333;
  padding: 10px 14px;

  &::-webkit-scrollbar {
    width: 4px;
    height: 8px;
    // display: none;
  }

  // &:hover::-webkit-scrollbar {
  //   // 鼠标悬停时显示滚动条
  //   display: block;
  // }
  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #dcd7d7;
    border-radius: 10px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: #bab8b8;
  }

  .list {
    .item {
      display: flex;
      margin-bottom: 20px;
      .item-face {
        width: 36px;
        height: 36px;
        background-color: #333;
        border-radius: 50%;
        margin-bottom: 10px;
        overflow: hidden;
        margin-right: 10px;
        background: url("@/assets/img/face.jpg") no-repeat 0 0;
        background-size: 100% 100%;
      }
      .item-content {
        display: flex;
        flex-direction: row;
        font-size: 16px;
        line-height: 1.75;
        flex: 1;
        .item-content-txt {
          background: #fff;
          padding: 16px 20px;
          border-radius: 8px;
          text-align: justify;
          .ellipsis {
            &::after {
              content: "。";
              animation: ellipsis 1.5s infinite;
            }
          }
          @keyframes ellipsis {
            0%,
            100% {
              content: "。";
            }
            33% {
              content: "。。";
            }
            66% {
              content: "。。。";
            }
          }
        }
      }
      &.my-info {
        .item-face {
          visibility: hidden;
        }
        .item-content {
          justify-content: flex-end;
          width: 100%;
          min-width: 320px;
          .item-content-txt {
            background: #ddf1fe;
          }
        }
      }
    }
  }
}

.my-input-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0 20px 55px;
  .my-input {
    width: 100%;
    padding: 12px 20px;
    font-size: 16px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: #fff;
    transition: border-color 0.3s, box-shadow 0.3s;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    box-sizing: border-box;
    resize: none;
    overflow-y: hidden;
    margin-right: 20px;

    &::placeholder {
      color: #6c757d;
    }

    &:hover {
      border-color: #007bff;
      box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.1);
    }

    &::-webkit-scrollbar {
      width: 4px;
      height: 8px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #888;
      border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb:hover {
      background-color: #555;
    }
  }
  .input-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 40px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    &[disabled],
    &.disabled {
      // 添加 disabled 样式
      background-color: #ccc;
      cursor: not-allowed;
      pointer-events: none;
    }
  }
}
</style>